<template>
	<view class="todo-content-bg">
		<view class="todo-first-item-bg">
			<view class="first-title-txt">当前模板</view>
			<picker mode="selector" :range="templateList" range-key="name" @change="onTemplateChange">
				<view class="picker">
					{{selectedTemplate ? selectedTemplate.name : '请选择模板'}}
				</view>
			</picker>
		</view>
		<!-- <view class="whole-width-bg">
			<view class="btn1-bg mar-right">模板删除</view>
			<view class="btn1-bg mar-left">模板更新</view>
		</view> -->
		<!-- <view class="todo-first-item-bg">
			<view class="first-title-txt">定位</view>
		</view>
		<view class="whole-width-bg">
			<view class="btn1-bg mar-right">焊接定位</view>
			<view class="btn1-bg mar-left">参数设置</view>
		</view> -->
		<view class="todo-first-item-bg">
			<view class="first-title-txt">焊接开始模式</view>
			<picker mode="selector" :range="weldingStartModalList" range-key="name" @change="onWeldingStartModalChange">
				<view class="picker">
					{{selectedWeldingStartModal ? selectedWeldingStartModal.name : '请选择模式'}}
				</view>
			</picker>
			<view class="whole-width-bg mar-top">
				<view class="btn1-bg mar-right" @click="startWelding">开始焊接</view>
				<!-- <view class="btn1-bg mar-left">任务筛选</view> -->
			</view>
			<view class="bottom-hint-bg">注：焊接为上一次焊接定位结果</view>
		</view>
	</view>
</template>

<script>
	import robotApi from '../apis/robotApi';
	export default {
		name:"robot-welding-todo",
		data() {
			return {
				templateList: [],
				selectedTemplate: null,
				
				weldingStartModalList: [
					{
						name: "起弧焊接",
						code: 0
					},
					{
						name: "空移",
						code: 1
					},
					// {
					// 	name: "其他",
					// 	code: 2
					// }
				],
				selectedWeldingStartModal: null,
				
				isWeldingStart: false,
			};
		},
		mounted() {
			this.init()
		},
		methods: {
			init() {
				this.selectedWeldingStartModal = this.weldingStartModalList[0]
				this.getTemplateData()
			},
			
			/**
			 * 获取模板列表
			 */
			getTemplateData() {
				robotApi.getTemplateList({})
					.then(res => {
						if (res.code == 200 || res.code == "200") {
							this.templateList = res.data
						}
					})
			},
			
			onTemplateChange(e) {
				this.selectedTemplate = this.templateList[e.detail.value]
			},
			
			onWeldingStartModalChange(e) {
				this.selectedWeldingStartModal = this.weldingStartModalList[e.detail.value]
			},
			
			startWelding() {
				if (!this.selectedWeldingStartModal) {
					uni.showToast({
						title: "请选择开始模式"
					})
					return
				}
				let data = {
					weldStartType: this.selectedWeldingStartModal.code,
					id: this.selectedTemplate.templateTaskId
				}
				if (this.isWeldingStart) {
					return
				}
				this.isWeldingStart = true
				robotApi.startTemplateWelding(data.id, data.weldStartType)
					.then(res => {
						console.log("res-->" + JSON.stringify(res))
						console.log(typeof(res.data))
						if (typeof(res.data) === 'boolean' && res.data && (res.code == 200 || res.code == "200")) {
							uni.showToast({
								title: res.msg?res.msg:"操作成功"
							})
						} else {
							uni.showToast({
								title: res.msg
							})
						}
						this.isWeldingStart = false
					})
					.catch(error => {
						this.isWeldingStart = false
					})
			}
		}
	}
</script>

<style scoped lang="scss">
	.todo-content-bg {
		padding: 80rpx 40rpx;
	}
	
	.todo-first-item-bg {
		background-color: #1e3a8a;
		padding: 30rpx;
		border-radius: 8px;
		margin-bottom: 30rpx;
		
		.first-title-txt {
			color: rgba(209, 213, 219, 1);
			font-size: 28rpx;
			margin-bottom: 20rpx;
		}
		.first-name-txt {
			color: #FFFFFF;
			font-size: 32rpx;
		}
	}
	.whole-width-bg {
		display: flex;
		align-items: center;
		width: 100%;
		margin-bottom: 30rpx;
	}
	.btn1-bg {
		padding: 20rpx 0;
		flex: 1;
		border-radius: 16rpx;
		background-color: #3b82f6;
		color: #FFFFFF;
		text-align: center;
	}
	.mar-left {
		margin-left: 20rpx;
	}
	.mar-right {
		margin-right: 20rpx;
	}
	.mar-top {
		margin-top: 30rpx;
	}
	.bottom-hint-bg {
		margin-top: 30rpx;
		font-size: 24rpx;
		text-align: center;
		color: rgba(156, 163, 175, 1);
	}
	
	input,
	.picker {
		/* width: 100%; */
		flex: 1;
		padding: 10px;
		border: 1px solid rgba(37, 99, 235, 1);
		border-radius: 6px;
		font-size: 16px;
		background-color: #1e40af;
		color: #FFFFFF;
	}
</style>